import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {PowerColModel} from '../../../models/kdm-response-model';
import {Router} from '@angular/router'

@Component({
  selector: 'app-regional-contrast-item',
  templateUrl: './regional-contrast-item.component.html',
  styleUrls: ['./regional-contrast-item.component.css']
})
export class RegionalContrastItemComponent implements OnInit ,OnChanges  {

  constructor(
    private router:Router
  ) { }

  public chartOptions
  @Input() colDatas:PowerColModel[]
  @Input() rout:string
  @Input() startTime:string
  @Input() endTime:string

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['colDatas']&&this.colDatas&&this.colDatas.length>0){
      // alert('bug')
      this.splitOptions=[];
      this.initChart();
    }
  }

  ngOnInit() {
  }

  public splitOptions:any[]=[]

  private initChart() {
    let xData=this.colDatas;
    let itemName=[]
    // itemName.push('宁夏')
    let max=0;
    let energyRate=[],dispatchStopEnergyRate=[],
      dispatchSelfEnergyRate=[],overhaulStopEnergyRate=[],
      breakStopEnergyRate=[],performanceEnergyRate=[],
      selfEnergyRate=[];
    xData.forEach(elem=>{
      if(elem.id!=2){
        let _name=elem.name.substring(0,elem.name.length-2)
        let name:any=[]
        for (let i=0;i<_name.length;i++){
            name.push(_name[i])
        }
        itemName.push(name.join(''))
        let maxed=0
        energyRate.push({y:elem.energyRate*100,val:elem.id});
        dispatchSelfEnergyRate.push({y:elem.dispatchSelfEnergyRate*100,val:elem.id});
        dispatchStopEnergyRate.push({y:elem.dispatchStopEnergyRate*100,val:elem.id});
        overhaulStopEnergyRate.push({y:elem.overhaulStopEnergyRate*100,val:elem.id});
        breakStopEnergyRate.push({y:elem.breakStopEnergyRate*100,val:elem.id});
        performanceEnergyRate.push({y:elem.performanceEnergyRate*100,val:elem.id});
        selfEnergyRate.push({y:elem.selfEnergyRate*100,val:elem.id})
        maxed+=elem.energyRate*100+elem.dispatchSelfEnergyRate*100+
          elem.dispatchStopEnergyRate*100+
          elem.overhaulStopEnergyRate*100+elem.breakStopEnergyRate*100+
          elem.performanceEnergyRate*100+elem.selfEnergyRate*100;
        if(maxed>=max)
          max=maxed
      }
    });
    let initData=[
      { name: '实际发电量', data:performanceEnergyRate,color:'#ffffff'},
      { name: '性能损失', data:selfEnergyRate,color:'#02DCBF'},
      { name: '固有损失', data:dispatchStopEnergyRate,color:'#A09FA2'},
      { name: '引水损失', data:overhaulStopEnergyRate,color:'#B400A0'},
      { name: '漏水损失', data:breakStopEnergyRate,color:'#FF0000'},
      // { name: '弃水应发', data: dispatchSelfEnergyRate,color:'#E6E900'},
    ];
    let startTime = this.startTime;
    let endTime = this.endTime
    this.chartOptions = {
      chart: {
        height: 150,
        // plotBorderWidth: null,
        // plotShadow: false,
        type: 'column',
        backgroundColor: 'transparent',
        // renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: itemName,
        labels:{
          // style:{ "color": "#ccd6eb" },
        },
      },
      yAxis: {
        max:Math.ceil(max),
        min:0,
        endOnTick: false,
        title: {
          text: '水能利用占比',
          // style:{'color':'#ccd6eb'}
        },
        gridLineWidth: 0,
        labels:{
          // style:{ "color": "#ccd6eb" }
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: e=>{
                this.router.navigate([this.rout,e.point.val,{startTime:startTime, endTime:endTime}])
              }
            }
          }
        },
        column: {
          stacking:'normal',
          pointPadding: 0.1,
          borderWidth: 0
        },
      },
      series: initData
    }
    initData.forEach((data,index)=>{
      this.setOption(data,max,index)
    })
  }
  setOption(data:any,max:number,index:number){
    this.splitOptions[index]={
      chart: {
        height: 100,
        // plotBorderWidth: null,
        // plotShadow: false,
        type: 'column',
        backgroundColor: 'transparent',
        // renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: data.name,
        labels:{
          // style:{ "color": "#ccd6eb" },
          enabled:false
        },
      },
      yAxis: {
        max:Math.ceil(max),
        min:0,
        endOnTick: false,
        title: {
          text: data.name,
          // style:{'color':'#ccd6eb'}
        },
        gridLineWidth: 0,
        labels:{
          // style:{ "color": "#ccd6eb" },
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          stacking:'normal',
          pointPadding: 0.1,
          borderWidth: 0
        }
      },
      series: [data]
    }
  }
}


